<template>
  <div
    class="dict-tag"
    :style="{
      display: 'inline-flex',
      gap: props.gutter,
      justifyContent: 'center',
      alignItems: 'center'
    }"
  >
    {{ dictOptions.map((v: SourceTagVO) => v.tagName).join(',') }}
  </div>
</template>

<script lang="ts" setup>
import { computed, PropType } from 'vue'
import { SourceTagApi, SourceTagVO } from '@/api/dr/sourcetag'
import { isArray, isBoolean, isNumber, isString } from '@/utils/is'

const props = defineProps({
  value: {
    type: [String, Number, Boolean, Array],
    required: true
  },
  // 字符串分隔符 只有当 props.value 传入值为字符串时有效
  separator: {
    type: String as PropType<string>,
    default: ','
  },
  // 每个 tag 之间的间隔，默认为 5px，参考的 el-row 的 gutter
  gutter: {
    type: String as PropType<string>,
    default: '5px'
  }
})
const valueArr: any = computed(() => {
  // 1. 是 Number 类型和 Boolean 类型的情况
  if (isNumber(props.value) || isBoolean(props.value)) {
    return [String(props.value)]
  }
  // 2. 是字符串（进一步判断是否有包含分隔符号 -> props.sepSymbol ）
  else if (isString(props.value)) {
    return props.value.split(props.separator)
  }
  // 3. 数组
  else if (isArray(props.value)) {
    return props.value.map(String)
  }
  return []
})
const	dictOptions	=	ref<SourceTagVO[]>([])

const getOptions = async() => {
  const vals = valueArr.value.filter(v => v !== null && v !== undefined && v !== '')
  const fns = vals.map(async(id) => {
    return await SourceTagApi.getSourceTag(id)
  })
  dictOptions.value = await Promise.all(fns)
}
watch(valueArr.value, () => {
  getOptions()
}, {
  deep: true,
  immediate: true
})
</script>

<style lang="scss" scoped>
</style>
